<template>
  <view class="subpage-container">
    <!-- 顶部区域 -->
    <view class="header">
      <view class="title-row">
        <text class="title">{{ pageTitle }}</text>
      </view>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view scroll-y="true" class="content-area">
      <!-- 错误显示 -->
      <error-display 
        :show="showError" 
        :title="errorTitle" 
        :message="errorMessage" 
        @retry="loadSubItems"
      />
      
      <!-- 加载中显示 -->
      <view class="loading-container" v-if="isLoading">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载中...</text>
      </view>
      
      <!-- 子项目列表 -->
      <view v-if="!isLoading && !showError" class="items-grid">
        <view 
          v-for="item in subItems" 
          :key="item.id" 
          class="grid-button" 
          @tap="handleItemClick(item)"
        >
          <view class="icon-container">
            <image 
              class="icon-image" 
              :src="item.icon" 
              mode="aspectFit"
              @error="onImageError"
            ></image>
          </view>
          <text class="button-text">{{ item.name }}</text>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view v-if="!isLoading && !showError && subItems.length === 0" class="empty-state">
        <text class="empty-text">暂无子项目</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import ErrorDisplay from '@/components/ErrorDisplay.vue';
import content from '@/common/api/content.js';
const itemAPI = content.item;
import { NavigationHelper } from '@/common/utils/navigation.js';
import { ErrorHandler } from '@/common/utils/errorHandler.js';

export default {
  components: {
    ErrorDisplay
  },
  
  data() {
    return {
      pageTitle: '',
      parentId: null,
      subItems: [],
      isLoading: true,
      showError: false,
      errorTitle: '加载失败',
      errorMessage: '无法加载子项目，请检查网络连接'
    }
  },
  
  onLoad(options) {
    if (options.parent_id) {
      this.parentId = parseInt(options.parent_id);
      try {
        this.pageTitle = decodeURIComponent(options.title || '');
      } catch (error) {
        console.error('标题解码失败:', error);
        this.pageTitle = options.title || ''; // 使用原始标题作为备选
      }
      this.loadSubItems();
    } else {
      this.showError = true;
      this.errorMessage = '缺少必要的参数';
      this.isLoading = false;
    }
  },
  
  methods: {
    async loadSubItems() {
      this.isLoading = true;
      this.showError = false;
      
      try {
        // 使用相关项目API获取子项目数据
        const response = await itemAPI.getRelatedItems(this.parentId);
        this.subItems = (response.data && response.data.related_items) || [];
        
        // 如果API没有返回数据，使用默认数据
        if (this.subItems.length === 0) {
          this.subItems = this.getDefaultSubItems();
        }
        
        this.isLoading = false;
      } catch (error) {
        console.error('加载子项目失败:', error);
        
        // API调用失败时，使用默认数据而不是显示错误
        this.subItems = this.getDefaultSubItems();
        this.isLoading = false;
        this.showError = false;
      }
    },
    
    /**
     * 获取默认子项目数据
     * @returns {Array} 默认子项目列表
     */
    getDefaultSubItems() {
      // 根据不同的parent_id返回不同的默认数据
      if (this.parentId === 4) { // 页面类型项目
        return [
           {
             id: 41,
             name: '学生信息管理',
             description: '查看和管理学生基本信息',
             icon: 'https://img.icons8.com/color/96/student-male.png',
             content_type: 'markdown',
             content: '# 学生信息管理\n\n这里是学生信息管理功能...'
           },
           {
             id: 42,
             name: '课程管理',
             description: '课程信息查询和管理',
             icon: 'https://img.icons8.com/color/96/book.png',
             content_type: 'markdown',
             content: '# 课程管理\n\n这里是课程管理功能...'
           },
           {
             id: 43,
             name: '成绩查询',
             description: '查询学期成绩和绩点',
             icon: 'https://img.icons8.com/color/96/report-card.png',
             content_type: 'markdown',
             content: '# 成绩查询\n\n这里是成绩查询功能...'
           },
           {
             id: 44,
             name: '教务通知',
             description: '查看最新教务通知',
             icon: 'https://img.icons8.com/color/96/bell.png',
             content_type: 'markdown',
             content: '# 教务通知\n\n这里是教务通知功能...'
           }
         ];
      }
      
      // 其他parent_id的默认数据
      return [];
    },
    
    async handleItemClick(item) {
      await NavigationHelper.navigateToItem(item);
    },
    
    // 图片加载错误处理
    onImageError(e) {
      console.error('图片加载失败:', e);
      // 可以设置默认图片
      e.target.src = '/static/icons/helper.png';
    }
  }
}
</script>

<style>
.subpage-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部区域样式 */
.header {
  display: flex;
  flex-direction: column;
  background-color: #1e3c72;
  color: #fff;
  position: relative;
  padding-top: calc(20rpx + 44px);
}

.title-row {
  display: flex;
  justify-content: center;
  padding: 20rpx 0;
}

.title {
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
}

/* 内容区域样式 */
.content-area {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
}

/* 加载中样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 6rpx solid #f3f3f3;
  border-top: 6rpx solid #1e3c72;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #666;
}

/* 项目网格样式 - 使用flex布局保持一致性 */
.items-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 15rpx;
  padding: 20rpx 0;
}

/* 移除重复的按钮样式定义，使用公共样式 */

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

/* 响应式设计已在公共样式中定义 */
</style>